<?php  
	echo $this->inlineScript()->setScript( 'var saveOrder; ' .
	'$(document).ready(function(){
		var issort = false;	
	
		$("#sortable").sortable({
			cancel : ".sortable2",
			start : function() {
				issort = true;
			},
			stop : function() {
				window.setTimeout(function(){
					issort = false;
				}, 1000 );
			}
		});
		
		$(".sortable2").sortable();

		var state = {};
		$(".owner").click(function(){
			if( $(this).find("li").length > 0 && !issort ) {
				if( !state[$(this).attr("id")] ) {
					$(this).animate({
						height: parseInt( $(this).find("li").length * 30 ) + "px"
					});
					state[$(this).attr("id")] = 2;
				} else {
					
					if( state[$(this).attr("id")] > 1 ) {
						$(this).animate({
							height: 18 + "px"
						});
						state[$(this).attr("id")] = 1;
					} else {
						$(this).animate({
							height: parseInt( $(this).find("li").length * 30 ) + "px"
						});
						state[$(this).attr("id")] = 2;
					}
				
				}
			}

		});
		
		saveOrder = function() {
			var body = $("body");

			var linfo = body.bounds();

			var elem = $("<div></div>").css({
				width: linfo.width + "px",
				height: linfo.height + "px",
				background: "#fff",
				position: "absolute",
				opacity: 0,
				top: "0px",
				left: "0px"
			});

			var info = $("<div>Trwa zapisywanie</div>").css({
				top: "-40px",
				left: "10px",
				position: "absolute",
				opacity: 1,
				background: "url(' . $this->baseUrl() . '/public/images/loading.gif) no-repeat",
				backgroundPosition: "-118px -38px",
				padding: "16px 0 0 48px",
				height: "40px",
				width: "200px"
			});

			$("body").append( elem );
			$("body").append( info );
			
			elem.animate({
				opacity: 0.7
			});
			
			info.animate({
				top: "10px"
			});
			
			$.post(
				baseUrl + "/cpmanufacturers/list",
				{ data : $("#orderform").find("input").serializeArray() },
				function( resp ) {
					elem.animate({
						opacity: 0
					}, 500, null, function(){
						$( this ).remove();
					});

					info.animate({
						top: "-50px"
					}, 700, null, function(){
						$( this ).remove();
					});
				},
				"json"
			);
		};
	
	})' .
	
	'');
?>

<style type="text/css">
	#sortable { list-style-type: none; margin: 0; padding: 0; width: 400px; }
	#sortable li { background: white; cursor: pointer; text-align: left; width: 400px; margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 10px; height: 18px; overflow: hidden; }
	#sortable li span { position: absolute; margin-left: -1.3em; }
	li.ui-sortable-helper { background: yellow; }
</style>

<table>
	<tr>
		<td>
			<a class="button" href="<?php echo $this->baseUrl() ?>/cpmanufacturers/item/type/<?php echo $this->type ?>">
				<div style="background:url(<?php echo $this->baseUrl() ?>/public/images/plus_16.png);" class="inb">Dodaj <?php echo $this->yih2 ?></div>
			</a>
		</td>
		<td>
			<a onclick="saveOrder()" class="button" href="javascript:void(null)">
				<div style="background:url(<?php echo $this->baseUrl() ?>/public/images/save_16.png);" class="inb">Zapisz kolejność</div>
			</a>
		</td>
	</tr>
</table>

<form id="orderform" action="" method="post">
	<div class="bglist">
		<div class="bglistq">
				<ul id="sortable">
				<?php $i = 0; foreach( $this->list as $item ) { $i++;  ?>
					<li class="owner" id="owner<?php echo $item['m_id'] ?>"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
						<?php 
							echo '<div style="float:left;">' . $item['name_pl'] . '</div>';
							echo '<div style="float:left;">
										<a style="height:20px;" href="'. $this->baseUrl() .'/cpmanufacturers/products/id/' . $item['m_id'] . '" class="edit2">Produkty</a>
										<a style="height:20px;" href="'. $this->baseUrl() .'/cpmanufacturers/item/id/' . $item['m_id'] . '" class="edit2">Edytuj</a>
										<a style="height:20px;" onclick="return confirmDelete();" href="' . $this->baseUrl() . '/cpmanufacturers/delete/id/' . $item['m_id'] . '" class="delete2">Usuń</a>
							</div>'; 
							
							echo '<input type="hidden" name="' . $item['m_id'] . '" value="' . $i . '" />';
						?>
					</li>
				<?php } ?>
				</ul>
		</div>
	</div>
</form>

<?php  echo $this->render('global/pager.phtml'); ?>